import React, {Component} from 'react';
import {Badge, Row, Col} from 'antd';
import {connect} from 'react-redux';

import {loadData} from './redux';

import './webinfo.bundle.less';

class Webinfo extends Component {

    componentDidMount() {
        if (!this.props.loadover) {
            this.props.loadData();
        }
    }

    render() {
        const data = this.props.data || [];
        console.log(data);
        return (
            <div className="webinfo">
                <div className='title'>实验环境状态<hr /></div>
                <div className='info'>
                    <Row>
                        <Col span={2}>当前状态：</Col>
                        <Col span={7}>
                            {data.length !== 0
                                ? <Badge status="success" text={<span style={{color: '#0f0', fontSize: '14px'}}>{data[0].State.Status}</span>} />
                                : <Badge status="error" text= {<span style={{color: '#f00', fontSize: '14px'}}>stop</span>} />
                            }
                        </Col>
                        <Col span={2}>启动时间：</Col>
                        <Col span={7}>{data.length !== 0 ? data[0].State.StartedAt : ''}</Col>
                    </Row>
                    <Row>
                        <Col span={2}>hostname:</Col>
                        <Col span={7}>{data.length !== 0 ? data[0].Config.Hostname : ''}</Col>
                        <Col span={2}>user:</Col>
                        <Col span={7}>{data.length !== 0 ? data[0].Config.User : ''}</Col>
                    </Row>
                    <Row>
                        <Col span={2}>镜像:</Col>
                        <Col span={7}>{data.length !== 0 ? data[0].Config.Image : ''}</Col>
                        <Col span={2}>端口:</Col>
                        <Col span={7}>{data.length !== 0 ? data[0].NetworkSettings.Ports['8888/tcp'][0].HostPort : ''}</Col>
                    </Row>
                    <Row>
                        <Col span={2}>IP地址:</Col>
                        <Col span={7}>{data.length !== 0 ? data[0].NetworkSettings.IPAddress : ''}</Col>
                        <Col span={2}>MAC地址:</Col>
                        <Col span={7}>{data.length !== 0 ? data[0].NetworkSettings.MacAddress : ''}</Col>
                    </Row>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return state.webinfo;
}

function mapDispatchToProps(dispatch) {
    return {
        loadData() {
            return dispatch(loadData());
        }
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Webinfo);
